<template>
	<el-row :gutter="20">
		<el-col :span="4">
			<div class="goods-type">
				<div class="type">
					<h2>Amadeus</h2>
				</div>
				<div class="type" v-for="item in goodsTypes" @click="changeType(item._id)">
					{{ item.name }}
				</div>
			</div>
		</el-col>
		<el-col :span="20">
			<el-container style="min-height:95vh">
				<el-header>
					<div class="step">
						<el-steps :active="active" finish-status="success" align-center>
							<el-step title="点单" />
							<el-step title="下单" />
							<el-step title="结账" />
						</el-steps>
					</div>

				</el-header>
				<el-main>
					<RouterView />
				</el-main>
				<el-footer>购物车列表</el-footer>
			</el-container>
		</el-col>
	</el-row>
</template>
<script setup>
import { RouterView } from 'vue-router'
import { ref } from 'vue'
import { useStore } from "vuex"

import { getGoodsType } from '../api/goods'

const store = useStore()


const goodsTypes = ref([])

getGoodsType().then((res) => {
	goodsTypes.value = res.data
	store.commit('changeData', { "goodsTypes": res.data })
})
function changeType(id) {

}
</script>

<style lang="scss" scoped>
.goods-type {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem;
	border: 1px solid black;
	border-radius: 10px;

	.type {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 50px;
		padding: .5rem;
		border: 1px solid black;
		border-radius: 10px;
		cursor: pointer;

		&:hover {
			background-color: coral;
		}
	}
}
.step {
	padding: 1rem;
	border: 1px solid black;
	border-radius: 10px;
}
:deep(.el-header){
	height: auto;
}
</style>